<template>
    <div>
             <el-table
          :data="data"
          style="width: 100%"
          height="610"
          stripe
          :default-sort="{ prop: 'date', order: 'descending' }"
          :cell-style="rowClass"
          :header-cell-style="headClass"
          class="tableBox"
        >
          <el-table-column type="index" label="序号" >
          </el-table-column>
          <el-table-column prop="xuhao" label="项目名称" >
          </el-table-column>
          <el-table-column prop="date" label="项目编码" 
          >
           <!-- sortable排序 -->
          </el-table-column>
          <el-table-column prop="date" label="项目所属单位">
          </el-table-column>
         
          <el-table-column
            prop="address"
            label="项目分类"
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="项目性质"
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column
            prop="xuhao"
            label="实施范围"
        
          >
          </el-table-column>
            <el-table-column
            prop="xuhao"
            label="项目内容"
        
          >
          </el-table-column>  <el-table-column
            prop="xuhao"
            label="总体目标"
        
          >
          </el-table-column> 
           <el-table-column
            prop="xuhao"
            width="100"
            label="目总投入-资金构成-合计"
        
          >
          </el-table-column>
           <el-table-column
            prop="xuhao"
            width="140"
            label="项目总投入-资金构成-资本性"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            width="140"
            label="项目总投入-资金构成-成本性"
            :formatter="formatter"
          >
          </el-table-column>
           <el-table-column
            prop="xuhao"
            width="120"
            label="项目总投入-资金用途-硬件"
          >
          </el-table-column>
         
           <el-table-column
            prop="xuhao"
            label="项目总投入-资金用途-软件"
           width="120"
            
          >
          </el-table-column>
        
           <el-table-column
            prop="xuhao"
            label="项目总投入-资金用途-开发"
            width="120"
          >
          </el-table-column>
            <el-table-column
            prop="xuhao"
            label="项目总投入-资金用途-实施"
            width="120"
          >
          </el-table-column>  <el-table-column
            prop="xuhao"
            label="项目总投入-资金用途-其他"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="xuhao"
            label="明年计划-资金构成-合计" 
            width="100"
          >
          </el-table-column><el-table-column
            prop="xuhao"
            label="明年计划-资金构成-资本性" 
            width="120"
          >
          </el-table-column><el-table-column
            prop="xuhao"
            label="明年计划-资金构成-成本性" 
            width="120"
          >
          </el-table-column><el-table-column
            prop="xuhao"
            label="明年计划-资金用途-硬件" 
            width="100"
          >
          </el-table-column><el-table-column
            prop="xuhao"
            label="明年计划-资金用途-软件" 
            width="100"
          >
          </el-table-column><el-table-column
            prop="xuhao"
            label="明年计划-资金用途-开发" 
            width="100"
          >
          </el-table-column><el-table-column
            prop="xuhao"
            label="明年计划-资金用途-实施" 
            width="100"
          >
          </el-table-column><el-table-column
            prop="xuhao"
            label="明年计划-资金用途-其他"
            width="100" 
          >
          </el-table-column>
           <el-table-column
            prop="xuhao"
            label="备注" 
          >
          </el-table-column>

        </el-table>
          <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.length"
          >
          </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        props:['data'],
        data () {
            return {
                 currentPage4: 1,  
            }
        },
        mounted () {
            // console.log('table');
          //  console.log(this.data) 
        },
        methods: {
    formatter(row, column) {
      return row.address;
    },
              // 表头样式设置
    headClass() {
      return "text-align: center;background:#eef1f6;height:61px;";
    },
      // 表格样式设置
     rowClass() {
      return "text-align: center;height:61px;";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
        }
    }
</script>

<style scoped>
.block {
  width: 100%;
}
.el-pagination {
  margin-top: 15px;
  padding: 5px 0 !important;
  text-align: center;
  /* line-height: 70px; */
}


</style>